<template>
  <div class="main">
    <div class="head">新型冠状病毒防疫科普测试评价</div>
    <div class="body">
      <template v-if="flag">
        <div class="a1">
          <p class="a12">本次得分</p>
          <div class="a13">{{countscore}}</div>
          <span class="a14" v-if="countscore==100">满分</span>
          <div class="a15">
            <p>
              <span class="t1">评价语</span>：
               <span v-if="countscore<60">
                恭喜您完成了新型冠状病毒的防疫科普测试，但您的成绩并不理想，
                对新型冠状病毒的认知急需加强，点击下方“查看错题”有助于您加强对防疫知识的认识，
                希望您再接再厉，祝愿您远离新型冠状病毒病毒，健康快乐。
              </span>
                <span v-else-if="countscore>=60 && countscore<100">
                恭喜您在本次新型冠状病毒的防疫科普测试中获得了优异的成绩，
                但有些防疫知识仍需努力加强，点击下方“查看错题”有助于您加强对防疫知识的认识，
                希望您再接再厉，祝愿您远离新型冠状病毒，健康快乐。
              </span>
              <span v-else-if="countscore==100">
                恭喜您在本次新型冠状病毒的防疫科普测试中答对了所有题目，
                获得了满分，希望您再接再厉，并在现实生活中保持健康卫生的良好习惯，祝愿新型冠状病毒永远远离您。
              </span>             
            </p>
            <div class="btn">
              <!-- <span >分享</span> -->
              <span v-if="countscore==100" @click="doagin">再来一次</span>
              <span v-else @click="check">查看错题</span>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="a2">
          <p class="title">提示：红色选项为您选择的错误选项，绿色选项为本题选择的正确答案。</p>
          <div class="BODY">
            <div>
              <p class="content">
                <span>{{num}}/{{topic.length}}</span>,
                <i>{{qusetion}}</i>
                <span v-if="timu['answer_type']==1">(这是单选)</span>
                <span v-else>(这是多选)</span>
              </p>
              <div class="qubody">
                <ul>
                  <li
                    v-for="(item, index) in timu.options"
                    :key="index"
                    :class="['mai',item.right ? rightcolor : '',item.err ? errcolor : '']"
                  >{{item.title}}</li>
                </ul>
                <div class="btn">
                  <span @click="doagin">再来一次</span>
                  <span @click="next">查看下一题</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      rightcolor: "rightcolor",
      errcolor: "errcolor",
      countscore: this.$route.query.countscore,
      flag: true,
      isfull: true,
      num: 1,
      topic: "",
      timu: "",
      qusetion: "",
      option: ""
    };
  },
  created() {
    var data = JSON.parse(window.localStorage.getItem("jsonkey"));
    console.log(data);
    this.topic = data;
    this.show(this.num);
  },
  methods: {
    doagin() {
            this.load_sound()

      this.$router.push({ path: "/calequestion" });
    },
    check() {
      this.flag = false;
            this.load_sound()

    },
     load_sound(url_data) {
      var url = "./btn.mp3";
      // var con = new AudioContext();
      let AudioContext = window.AudioContext || window.webkitAudioContext;
      let audioCtx = AudioContext ? new AudioContext() : '';
      axios.get(url, { responseType: "arraybuffer" }).then(req => {  
        audioCtx.decodeAudioData(
          req.data,
          function(buffer) {        
            var source = audioCtx.createBufferSource();
            source.buffer = buffer;
            source.connect(audioCtx.destination);
            source.start(0);

          },
          function(e) {
            console.info("错误");
          }
        );
      });
    },
    next() {
      this.load_sound()
      var that = this;
      if (that.num < that.topic.length) {
        that.selected = []; //不然会继承前面选着的select，每次清空。如果选着过渲染时show会加上赋值

        that.num++;

        that.show(that.num);
      } else {
        that.$message("最后一题");
        // 切换按钮
        if (that.num == that.topic.length - 1) {
          // $('.jh .right').removeClass('show').addClass('hidden')
          // $('.jh .get').removeClass('hidden').addClass('show')
        }
      }
    },
    show(num) {
      var that = this;
      var index = num;
      // var number= num / that.topic.length
      // // 截取两位小数
      // that.prersent =(number* 100).toFixed(2)-0;
      that.timu = that.topic[index - 1];
      console.log(that.timu);
      if (that.timu.answer_type == 2) {
        //    如果是多选而且有selects属性赋值给select 单选是直接获取到自己的selected
        if (that.timu["selected"]) {
          that.selected = that.timu["selected"];
          // console.log(that.selected);
        }
      }
      //   如果有选着过的设置disabnled
      if (that.timu["selected"]) {
        that.disabled = false;
      } else {
        that.disabled = true;
      }
      // console.log(that.timu);
      that.qusetion = that.timu["question"];
      var options = [];
      that.timu.answers.map((item, index) => {
        var obj = {};
        obj["title"] = item;
        if (that.timu.answer_type == 1) {
          //单选
          if (that.timu.right_key == index + 1) {
            obj["right"] = true;
          }
          if (that.timu.erranswer == index + 1) {
            obj["err"] = true;
          }
          options.push(obj);
        } else {
          // 多选
          var right_key = that.timu["right_key"].split("|");
          right_key.map((item, index) => {
            if (item == index + 1) {
              obj["right"] = true;
            }
          });
          that.timu["erranswer"].map((item, index) => {
            if (item == index + 1) {
              obj["err"] = true;
            }
          });
          options.push(obj);
        }
      });
      that.timu["options"] = options;
    }
  }
};
</script>

<style lang="scss" scoped>
.mai {
  background-color: #a4c2ff;
}
.main {
  min-height: 768px;
  max-width: 768px;
  margin: 0 auto;

  background-color: #e0ecf8;
  background: url("../assets/结束/form_6.png") no-repeat;
  background-size: 100% 100%;
  .a1 {
    color: #3769fc;

    .a12 {
      padding-top: 40px;
    }
    .a13 {
      font-weight: 600;
      font-size: 80px;
      padding: 10px 0;
    }
    .a14 {
      padding: 5px;
      color: #fbacd2;
      font-size: 30px;
      font-weight: 500;
    }
    .a15 {
      margin-top: 60px;
      p {
        padding: 0 50px;
        text-align: left;
        .t1 {
          color: #ff0000;
        }
      }
      .btn {
        margin: 0 55px;
        display: flex;
        justify-content: space-between;
        margin-top: 100px;
        span {
          display: inline-block;
          height: 40px;
          line-height: 40px;
          width: 90px;
          background-color: #386afc;
          color: #e0ecf8;
          border-radius: 7px;
          cursor: pointer;
        }
      }
    }
  }
  .a2 {
    .title {
      color: #f45d5d;
      padding: 15px;
      text-align: left;
    }
    .BODY {
      padding: 0 30px;
      text-align: left;
      h3 {
        text-align: left;
        font-size: 20px;
      }
      .content {
        margin: 20px 0;
      }
      .qubody {
        li {
          list-style: none;
          line-height: 40px;
          margin: 10px 0;
          border-radius: 8px;
        }
        .btn {
          margin: 0 10px;
          display: flex;
          justify-content: space-between;
          margin-top: 100px;
          span {
            display: inline-block;
            height: 40px;
            line-height: 40px;
            width: 90px;
            background-color: #386afc;
            color: #e0ecf8;
            border-radius: 7px;
            text-align: center;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.errcolor {
  background-color: #f45d5d;
}
.rightcolor {
  background-color: #92d050;
}
.head {
  background-color: #3769fc;

  letter-spacing: 3px;
  color: #fff;
  text-align: center;
  height: 50px;
  line-height: 50px;
}
</style>